import React, { useEffect, useState } from 'react';
import { Breadcrumb, Input, Button, Table, Switch } from 'antd';
import '../../../views/Index/Staff/Staff.scss'
import { PlusOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom'
import type { ColumnsType } from 'antd/es/table';
import service from '../../../api';

interface Props {

}

interface DataType {
    key: React.Key;
    name: string;
    jiaose: string;
    login: number;
    addperson: string;
    time: string
}

function Staff(props: Props) {
    const [list, setlist] = useState<DataType[]>([])

    const navigate = useNavigate()
    const tiao = () => {
        navigate('/index/staffadd')
    }

    const res1 = async () => {
        const res = await service.staff.staff_list()
        console.log(res.data);
        setlist(res.data)
    }
    useEffect(() => {
        res1()
    }, [])

    const columns: ColumnsType<DataType> = [
        {
            title: '员工姓名',
            dataIndex: 'name',
            key: 'name',
            render: (_, record) => <span>{record.name}</span>
        },
        {
            title: '登录账号',
            dataIndex: 'login',
            key: 'login',
            render: (_, record) => <span>{record.login}</span>
        },
        {
            title: '角色',
            dataIndex: 'jiaose',
            key: 'jiaose',
            render: (_, record) => <span>{record.jiaose}</span>
        },
        {
            title: '状态',
            dataIndex: '',
            render: (_, record) => <p>{<Switch defaultChecked onChange={onChange} />}</p>
        },
        {
            title: '添加人',
            dataIndex: 'addperson',
            key: 'addperson',
            render: (_, record) => <span>{record.addperson}</span>
        },
        {
            title: '添加时间',
            dataIndex: '',
            key: 'time',
            render: (_, record) => <span>{record.time}</span>
        },
        {
            title: '操作',
            render: (_, record) => {
                return <>
                    <div className="handle">
                        <Button>编辑</Button>
                        <Button>删除</Button>
                    </div>
                </>
            }
        },
    ];


    const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);

    const onSelectChange = (newSelectedRowKeys: React.Key[]) => {
        console.log('selectedRowKeys changed: ', newSelectedRowKeys);
        setSelectedRowKeys(newSelectedRowKeys);
    };
    const rowSelection = {
        selectedRowKeys,
        onChange: onSelectChange,
    };

    //开关
    const onChange = (checked: boolean) => {
        console.log(`switch to ${checked}`);
    };
    return (
        <div className='staff'>
            <div className="one">
                <Breadcrumb>
                    <Breadcrumb.Item>
                        <a href="">设置</a>
                    </Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="">员工管理</a>
                    </Breadcrumb.Item>
                </Breadcrumb>
                <p>员工管理</p>
                <div className="sou">
                    <div className="left">
                        <span>员工姓名:</span>
                        <Input placeholder="请输入" />
                    </div>
                    <div className="right">
                        <Button type="primary">查询</Button>
                        <Button>重置</Button>
                    </div>
                </div>
                <div className="two">
                    <div className="top">
                        <header>员工列表</header>
                        <div className="you">
                            <Button onClick={tiao} type="primary"><PlusOutlined />新建</Button>
                            <Button>批量操作</Button>
                        </div>
                    </div>
                </div>
                <div className="taber">
                    <Table rowSelection={rowSelection} columns={columns} dataSource={list} rowKey='key' />
                </div>
            </div>
        </div>
    );
}

export default Staff;